<template>
  <div class="record-case-list-container">
    <a-page-header 
      class="demo-page-header" 
      style="border: 1px solid rgb(235, 237, 240); margin-bottom: 24px;"
      title="录案列表" 
      :sub-title="`${recordCasesData.length}条数据`" 
      @back="() => $router.go(-1)"
    >
      <p class="date-range-info">
        显示所有录案数据，今日和昨日案件已用不同颜色标识
      </p>
    

      <template #extra>
        <a-space>
          <a-button type="primary" @click="handleAddRecordCase">
            新增录案
          </a-button>
          <a-button @click="handleRefresh">
            刷新
          </a-button>
        </a-space>
      </template>
    </a-page-header>

    <div class="table-section">
      <div class="table-wrapper">
        <Spin :spinning="loading" tip="加载中...">
          <a-table 
            :bordered="true" 
            :columns="columns" 
            :data-source="recordCasesData" 
            :pagination="paginationConfig"
            :onChange="handleTableChange" 
            :rowClassName="getRowClassName" 
            row-key="id"
          >
            <template #bodyCell="{ column, record }">
              <template v-if="column.key === 'operation'">
                <a-space>
                  <a-button 
                    size="small" 
                    type="link"
                    @click="handleView(record)"
                  >
                    查看
                  </a-button>
                </a-space>
              </template>
              <template v-else-if="column.key === 'state'">
                <a-tag :color="getStatusColor(record.state)">{{ getStatusText(record.state) }}</a-tag>
              </template>
            </template>
          </a-table>
        </Spin>
      </div>
    </div>

    <!-- 新增录案弹框 -->
    <a-modal
      v-model:open="addRecordCaseModalVisible"
      title="导入案件"
      :width="600"
      :confirm-loading="submitLoading"
      @ok="handleSubmitRecordCase"
      @cancel="handleCancelRecordCase"
      :bodyStyle="{ padding: '24px' }"
      :ok-text="'提交'"
      :cancel-text="'取消'"
    >
      <a-form
        ref="recordCaseFormRef"
        :model="recordCaseForm"
        :rules="recordCaseFormRules"
        :label-col="labelCol" 
        :wrapper-col="wrapperCol"
      >
        <a-form-item label="渠道名称" name="channelId" required>
          <a-select
            v-model:value="recordCaseForm.channelId"
            placeholder="请选择渠道"
            :loading="channelLoading"
            @change="handleChannelChange"
          >
            <a-select-option
              v-for="channel in channelList"
              :key="channel.id"
              :value="channel.id"
            >
              {{ channel.channelName }}
            </a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="产品类型" name="productId" required>
          <a-select
            v-model:value="recordCaseForm.productId"
            placeholder="请选择产品类型"
            :loading="productLoading"
            :disabled="!recordCaseForm.channelId"
          >
            <a-select-option
              v-for="product in productList"
              :key="product.id"
              :value="product.id"
            >
              {{ product.productName }}
            </a-select-option>
          </a-select>
        </a-form-item>

        <a-form-item label="委案日期" name="delegateDate" required>
          <a-date-picker
            v-model:value="recordCaseForm.delegateDate"
            placeholder="请选择委案日期"
            style="width: 100%"
            format="YYYY-MM-DD"
            :locale="locale"
          />
        </a-form-item>

        <a-form-item label="撤案日期" name="recallDate" required>
          <a-date-picker
            v-model:value="recordCaseForm.recallDate"
            placeholder="请选择撤案日期"
            style="width: 100%"
            format="YYYY-MM-DD"
            :locale="locale"
          />
        </a-form-item>

        <a-form-item label="文件">
          <a-upload
            v-model:file-list="fileList"
            :before-upload="beforeUpload"
            @remove="handleRemoveFile"
            accept=".xlsx,.xls"
          >
            <a-button class="upload-button">
              <upload-outlined class="upload-icon" />
              <span class="upload-text">上传文件</span>
            </a-button>
          </a-upload>
          <div style="margin-top: 8px;">
            <a @click="handleDownloadTemplate">点击下载模板</a>
          </div>
        </a-form-item>

        <a-form-item label="备注" name="memo">
          <a-textarea
            :rows="4"
            v-model:value="recordCaseForm.memo"
            placeholder="请输入备注"
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { ref, h, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { message, Spin } from 'ant-design-vue';
import { UploadOutlined } from '@ant-design/icons-vue';
import { getRecordCaseList, getChannelList, getProductList, saveRecordCase, getOSSSignature, saveAttachment, getCaseId } from '../server/api';
import type { SaveRecordCaseParams } from '../server/api';
import { OssUpload } from '../utils/uploadOss';
import { useUserStore } from '../store/user';
import type { GetRecordCaseListParams, ChannelInfo, ProductInfo } from '../server/type';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
import locale from 'ant-design-vue/es/date-picker/locale/zh_CN';

// 设置dayjs为中文语言
dayjs.locale('zh-cn');

const router = useRouter();
const userStore = useUserStore();

const labelCol = { style: { width: '80px' } };
const wrapperCol = { span: 20 };

// 分页配置
const paginationConfig = ref({
  current: 1,
  pageSize: 20,
  total: 0,
  showSizeChanger: true,
  showQuickJumper: true,
  showTotal: (total: number, range: [number, number]) => `第 ${range[0]}-${range[1]} 条/共 ${total} 条`,
  pageSizeOptions: ['10', '20', '50', '100']
});

// 表格列配置
const columns = [
  {
    title: '序号',
    key: 'index',
    width: 80,
    align: 'center',
    customRender: ({ index }: { index: number }) => {
      return (paginationConfig.value.current - 1) * paginationConfig.value.pageSize + index + 1;
    }
  },
  {
    title: '批次名称',
    dataIndex: 'batchName',
    key: 'batchName',
    width: 200,
    align: 'center',
    customCell: (record: any) => {
      return {
        innerHTML: `
          <div style="display: flex; align-items: center; justify-content: center; gap: 8px;">
            <span>${record.batchName || ''}</span>
            <button 
              class="copy-batch-name-btn" 
              data-batch-name="${record.batchName || ''}"
              style="
                background: none; 
                border: none; 
                cursor: pointer; 
                padding: 2px; 
                border-radius: 4px;
                display: flex;
                align-items: center;
                justify-content: center;
                transition: background-color 0.2s;
              "
              onmouseover="this.style.backgroundColor='#f0f0f0'"
              onmouseout="this.style.backgroundColor='transparent'"
              title="复制批次名称"
            >
              <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
                <path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/>
              </svg>
            </button>
          </div>
        `
      };
    }
  },
  {
    title: '渠道',
    dataIndex: 'bizChannel',
    key: 'bizChannel',
    width: 150,
    align: 'center'
  },
  {
    title: '产品',
    dataIndex: 'productTypeName',
    key: 'productTypeName',
    width: 150,
    align: 'center'
  },
  {
    title: '文件',
    dataIndex: 'importFileName',
    key: 'importFileName',
    width: 200,
    align: 'center',
    customRender: ({ text }: { text: string }) => {
      return text || '-';
    }
  },
  {
    title: '状态',
    dataIndex: 'state',
    key: 'state',
    width: 100,
    align: 'center'
  },
  {
    title: '备注',
    dataIndex: 'memo',
    key: 'memo',
    width: 150,
    align: 'center',
    customRender: ({ text }: { text: string }) => {
      return text || '-';
    }
  },
  {
    title: '明细',
    key: 'caseCount',
    align: 'center',
    width: 200,
    customRender: ({ record }: { record: any }) => {
      return h('div', { class: 'case-count-info' }, [
        h('div', { class: 'count-item' }, `总数：${record.totalCount || 0}`),
        h('div', { class: 'count-item' }, `成功：${record.successCount || 0}`),
        h('div', { class: 'count-item' }, `失败：${record.failCount || 0}`)
      ]);
    }
  },
  {
    title: '导入时间',
    dataIndex: 'created',
    key: 'created',
    align: 'center',
    width: 150,
    customRender: ({ text }: { text: number }) => {
      return text ? dayjs(text).format('YYYY-MM-DD HH:mm:ss') : '-';
    }
  },
  {
    title: '操作',
    key: 'operation',
    fixed: 'right',
    align: 'center',
    width: 100
  }
];

// 录案数据
const recordCasesData = ref<Array<Record<string, any>>>([]);

// 加载状态
const loading = ref(false);

// 调试模式（可以通过环境变量控制）
const debugMode = ref(import.meta.env.DEV);

// 新增录案相关状态
const addRecordCaseModalVisible = ref(false);
const submitLoading = ref(false);
const channelLoading = ref(false);
const productLoading = ref(false);

// 渠道和产品列表
const channelList = ref<ChannelInfo[]>([]);
const productList = ref<ProductInfo[]>([]);

// 文件列表
const fileList = ref<any[]>([]);

// 表单引用
const recordCaseFormRef = ref();

// 录案表单数据
const recordCaseForm = ref({
  id:'',
  channelId: undefined,
  productId: undefined,
  delegateDate: dayjs(), // 默认为今天
  recallDate: dayjs().add(1, 'month').subtract(1, 'day'), // 默认为下个月今天的前一天
  memo: '',
  bizChannelName: '' // 渠道名称
});

// 表单验证规则
const recordCaseFormRules = {
  channelId: [
    { required: true, message: '请选择渠道', trigger: 'change' }
  ],
  productId: [
    { required: true, message: '请选择产品类型', trigger: 'change' }
  ],
  delegateDate: [
    { required: true, message: '请选择委案日期', trigger: 'change' }
  ],
  recallDate: [
    { required: true, message: '请选择撤案日期', trigger: 'change' }
  ]
};

// 获取状态文本
const getStatusText = (status: any) => {
  if (typeof status === 'object' && status.message) {
    return status.message;
  }
  return typeof status === 'string' ? status : '未知';
};

// 获取状态颜色
const getStatusColor = (status: any) => {
  let statusCode = status;
  if (typeof status === 'object' && status.code) {
    statusCode = status.code;
  }
  const colorMap: Record<string, string> = {
    'TO_AUDIT': 'orange',
    'AUDITING': 'processing',
    'AUDIT_SUCCESS': 'success',
    'AUDIT_FAIL': 'error',
    'PRE_AUDIT_FAILED': 'red',
    'PENDING': 'blue',
    'COMPLETED': 'green'
  };
  return colorMap[statusCode] || 'default';
};



// 获取行样式类名
const getRowClassName = (record: any) => {
  if (!record.delegateDate) {
    return 'no-date-row';
  }

  // 解析委案日期
  let delegateDate = dayjs(record.delegateDate);

  // 如果第一次解析失败，尝试其他常见格式
  if (!delegateDate.isValid()) {
    // 尝试解析时间戳（毫秒）
    if (typeof record.delegateDate === 'number') {
      delegateDate = dayjs(record.delegateDate);
    }
    // 尝试解析时间戳（秒）
    else if (typeof record.delegateDate === 'string' && /^\d+$/.test(record.delegateDate)) {
      delegateDate = dayjs(parseInt(record.delegateDate) * 1000);
    }
    // 尝试其他日期格式
    else {
      delegateDate = dayjs(record.delegateDate, ['YYYY-MM-DD', 'YYYY-MM-DD HH:mm:ss', 'YYYY/MM/DD', 'MM/DD/YYYY']);
    }
  }

  // 检查日期是否有效
  if (!delegateDate.isValid()) {
    return 'invalid-date-row';
  }

  const today = dayjs();
  const yesterday = today.subtract(1, 'day');
  const twoDaysAgo = today.subtract(2, 'day');

  // 判断案件日期
  if (delegateDate.isSame(today, 'day')) {
    return 'today-row';
  } else if (delegateDate.isSame(yesterday, 'day')) {
    return 'yesterday-row';
  } else if (delegateDate.isAfter(twoDaysAgo)) {
    return 'recent-row';
  } else {
    return 'older-row';
  }
};

// 处理分页变化
const handleTableChange = (pagination: any) => {
  paginationConfig.value.current = pagination.current;
  paginationConfig.value.pageSize = pagination.pageSize;
  fetchRecordCaseList();
};

// 获取录案列表数据
const fetchRecordCaseList = async () => {
  loading.value = true;
  try {
    // 构建请求参数
    const params: GetRecordCaseListParams = {
      batchName: '',
      channelForm: '',
      state: '',
      current: paginationConfig.value.current,
      size: paginationConfig.value.pageSize,
      tsToken: userStore.tsToken || ''
    };

    const result = await getRecordCaseList(params);

    if (result.success && result.result) {
      const { records, total } = result.result;
      const allRecords = records || [];

      recordCasesData.value = allRecords;

      // 更新分页信息
      paginationConfig.value.total = total || 0;

      if (debugMode.value) {
        console.log('获取录案列表结果:', {
          总记录数: allRecords.length,
          分页信息: paginationConfig.value
        });
      }

      message.success(`获取录案列表成功，共 ${allRecords.length} 条记录`);
    } else {
      message.error('获取录案列表失败');
      recordCasesData.value = [];
    }
  } catch (error) {
    console.error('获取录案列表失败:', error);
    message.error('网络错误，请稍后重试');
    recordCasesData.value = [];
  } finally {
    loading.value = false;
  }
};

// 处理刷新
const handleRefresh = () => {
  fetchRecordCaseList();
};


// 查看录案详情
const handleView = (record: any) => {
  router.push(`/case-detail/${record.id}`);
};

// 新增录案相关函数
const handleAddRecordCase = () => {
  addRecordCaseModalVisible.value = true;
  fetchCaseId(); // 获取案件ID
  fetchChannelList();
};

const handleCancelRecordCase = () => {
  addRecordCaseModalVisible.value = false;
  resetForm();
};

const resetForm = () => {
  // 设置默认日期：委案日期为今天，撤案日期为下个月今天的前一天
  const today = dayjs();
  const nextMonthToday = today.add(1, 'month');
  const recallDate = nextMonthToday.subtract(1, 'day');
  
  recordCaseForm.value = {
    id:'',
    channelId: undefined,
    productId: undefined,
    delegateDate: today as any,
    recallDate: recallDate as any,
    memo: '',
    bizChannelName: ''
  };
  fileList.value = [];
  productList.value = [];
  recordCaseFormRef.value?.resetFields();
};

// 获取案件ID
const fetchCaseId = async () => {
  try {
    const result = await getCaseId({ 
      tsToken: userStore.tsToken || '' 
    });
    if (result.success && result.result) {
      recordCaseForm.value.id = result.result;
      console.log('获取案件ID成功:', result.result);
    } else {
      message.error('获取案件ID失败');
    }
  } catch (error) {
    console.error('获取案件ID失败:', error);
    message.error('获取案件ID失败');
  }
};

// 获取渠道列表
const fetchChannelList = async () => {
  channelLoading.value = true;
  try {
    const result = await getChannelList({ tsToken: userStore.tsToken || '' });
    if (result.success && result.result) {
      channelList.value = result.result;
    } else {
      message.error('获取渠道列表失败');
    }
  } catch (error) {
    console.error('获取渠道列表失败:', error);
    message.error('获取渠道列表失败');
  } finally {
    channelLoading.value = false;
  }
};

// 渠道变化时获取产品列表
const handleChannelChange = async (channelId: string) => {
  if (!channelId) {
    productList.value = [];
    recordCaseForm.value.productId = undefined;
    recordCaseForm.value.bizChannelName = '';
    return;
  }
  
  // 设置渠道名称
  const selectedChannel = channelList.value.find(channel => channel.id === channelId);
  if (selectedChannel) {
    recordCaseForm.value.bizChannelName = selectedChannel.channelName;
  }
  
  productLoading.value = true;
  try {
    const result = await getProductList({ 
      channelAId: channelId, 
      tsToken: userStore.tsToken || '' 
    });
    if (result.success && result.result) {
      productList.value = result.result;
    } else {
      message.error('获取产品列表失败');
    }
  } catch (error) {
    console.error('获取产品列表失败:', error);
    message.error('获取产品列表失败');
  } finally {
    productLoading.value = false;
  }
};

// 文件上传前处理
const beforeUpload = (file: any) => {
  const isExcel = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' || 
                  file.type === 'application/vnd.ms-excel';
  if (!isExcel) {
    message.error('只能上传 Excel 文件!');
    return false;
  }
  const isLt10M = file.size / 1024 / 1024 < 10;
  if (!isLt10M) {
    message.error('文件大小不能超过 10MB!');
    return false;
  }
  
  // 处理文件上传
  handleFileUpload(file);
  return false; // 阻止自动上传
};

// 文件上传处理
const handleFileUpload = async (file: File) => {
  console.log('文件上传开始:', { name: file.name, size: file.size, type: file.type });

  try {
    // 文件大小验证（限制为50MB）
    const maxSize = 50 * 1024 * 1024; // 50MB
    if (file.size > maxSize) {
      throw new Error('文件大小不能超过50MB');
    }

    // 文件类型验证
    const allowedTypes = [
      'application/vnd.ms-excel',
      'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
    ];
    if (!allowedTypes.includes(file.type)) {
      throw new Error('只支持Excel文件格式(.xlsx, .xls)');
    }

    message.loading('正在处理文件...', 0);

    // 设置OSS签名参数
    const getOSSSignatureParams = {
      accessType: 'CASE_FILE' as const,
      fileName: file.name,
      objectId: recordCaseForm.value.channelId as unknown as string,
      protocol: 'https' as const
    };

    // 获取OSS签名
    const signature = await getOSSSignature(getOSSSignatureParams);
    console.log('signature', signature);

    // 设置上传文件到OSS参数
    const uploadFileToOSSParams = {
      fileType: file.type,
      url: signature.result.dir,
      objectId: recordCaseForm.value.id,
      fileName: file.name,
      uploadType: 'CASE_FILE',
      bizType: 'CASE_FILE',
      protocol: 'https' as const,
    };

    if (signature.success) {
      // 上传文件到OSS
      await OssUpload(signature.result, file);
      
      // 保存上传文件的信息到系统
      await saveAttachment(uploadFileToOSSParams);
      
      // 将文件添加到fileList中
      const fileItem = {
        uid: Date.now().toString(),
        name: file.name,
        status: 'done',
        url: signature.result.dir,
        response: { success: true }
      };
      fileList.value = [fileItem];
      
      message.destroy();
      message.success('文件上传成功');
    } else {
      throw new Error('获取上传签名失败');
    }
  } catch (error) {
    console.error('文件上传失败:', error);
    message.destroy();
    message.error(error instanceof Error ? error.message : '文件上传失败，请重试');
  }
};

// 移除文件
const handleRemoveFile = (file: any) => {
  const index = fileList.value.indexOf(file);
  if (index > -1) {
    fileList.value.splice(index, 1);
  }
};

// 下载模板
const handleDownloadTemplate = () => {
  message.info('模板下载功能开发中...');
};

// 提交录案表单
const handleSubmitRecordCase = async () => {
  try {
    await recordCaseFormRef.value.validate();
    
    if (fileList.value.length === 0) {
      message.error('请上传文件');
      return;
    }
    
    submitLoading.value = true;
    
    // 获取选中的产品信息
    const selectedProduct = productList.value.find(product => product.id === recordCaseForm.value.productId);
    if (!selectedProduct) {
      message.error('请选择产品类型');
      return;
    }
    
    // 准备提交参数
    const submitParams: SaveRecordCaseParams = {
      id: recordCaseForm.value.id, // 案件ID
      bizChannel: (recordCaseForm.value.channelId as unknown as string),
      productTypeName: selectedProduct.productName,
      delegateDate: dayjs(recordCaseForm.value.delegateDate).toISOString(),
      recallDate: dayjs(recordCaseForm.value.recallDate).toISOString(),
      memo: recordCaseForm.value.memo || '',
      bizChannelName: recordCaseForm.value.bizChannelName || '',
      tsToken: userStore.tsToken || ''
    };
    
    console.log('录案提交参数:', submitParams);
    
    // 调用录案提交接口
    const result = await saveRecordCase(submitParams);
    
    if (result.success) {
      message.success('录案提交成功');
      addRecordCaseModalVisible.value = false;
      resetForm();
      fetchRecordCaseList(); // 刷新列表
    } else {
      message.error(result.message || '录案提交失败');
    }
  } catch (error) {
    console.error('提交录案失败:', error);
    message.error('提交录案失败');
  } finally {
    submitLoading.value = false;
  }
};


// 复制批次名称
const copyBatchName = async (batchName: string) => {
  try {
    await navigator.clipboard.writeText(batchName);
    message.success(`已复制批次名称: ${batchName}`);
  } catch (error) {
    console.error('复制失败:', error);
    // 降级方案：使用传统的复制方法
    const textArea = document.createElement('textarea');
    textArea.value = batchName;
    document.body.appendChild(textArea);
    textArea.select();
    try {
      document.execCommand('copy');
      message.success(`已复制批次名称: ${batchName}`);
    } catch (fallbackError) {
      console.error('降级复制也失败:', fallbackError);
      message.error('复制失败，请手动复制');
    }
    document.body.removeChild(textArea);
  }
};

// 初始化加载数据
onMounted(async () => {
  await fetchRecordCaseList();
  
  // 添加复制按钮的点击事件监听
  setTimeout(() => {
    const copyButtons = document.querySelectorAll('.copy-batch-name-btn');
    copyButtons.forEach(button => {
      button.addEventListener('click', (e) => {
        e.preventDefault();
        e.stopPropagation();
        const batchName = (e.target as HTMLElement).closest('.copy-batch-name-btn')?.getAttribute('data-batch-name') || '';
        if (batchName) {
          copyBatchName(batchName);
        }
      });
    });
  }, 100);
});
</script>

<style scoped>
.record-case-list-container {
  padding: 24px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
}

.header-title h2 {
  margin: 0 0 4px 0;
  font-size: 20px;
  font-weight: 600;
  color: #1a1a1a;
}

.date-range-info {
  margin: 0;
  font-size: 14px;
  color: #666;
  font-style: italic;
}

.filter-stats {
  color: #1890ff;
  font-weight: 500;
}

.color-legend {
  display: flex;
  gap: 16px;
  margin-top: 8px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #666;
}

.legend-color {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  border: 1px solid #d9d9d9;
}

.today-pending-audit-color {
  background: linear-gradient(135deg, #fff2e8 0%, #f6ffed 100%);
  border-left: 3px solid #ff7a00;
  position: relative;
}

.today-color {
  background-color: #f6ffed;
  border-left: 3px solid #52c41a;
}

.yesterday-color {
  background-color: #fff7e6;
  border-left: 3px solid #fa8c16;
}

.recent-color {
  background-color: #f0f5ff;
  border-left: 3px solid #1890ff;
}

.older-color {
  background-color: #fafafa;
  border-left: 3px solid #d9d9d9;
}

.table-section {
  margin-top: 24px;
}

.table-wrapper {
  overflow-x: auto;
}

/* 案件数量列样式 */
.case-count-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: left;
}

.count-item {
  font-size: 12px;
  line-height: 1.4;
  color: #666;
}

.count-item:first-child {
  color: #1890ff;
  font-weight: 500;
}

/* 今日案件行样式 */
:deep(.today-row) {
  background-color: #f6ffed !important;
  border-left: 4px solid #52c41a;
}

:deep(.today-row:hover) {
  background-color: #f0f9ff !important;
}

/* 今日待审核案件行样式 - 特殊高亮 */
:deep(.today-pending-audit-row) {
  background: linear-gradient(135deg, #fff2e8 0%, #f6ffed 100%) !important;
  border-left: 4px solid #ff7a00;
  box-shadow: 0 2px 8px rgba(255, 122, 0, 0.15);
  position: relative;
}

:deep(.today-pending-audit-row:hover) {
  background: linear-gradient(135deg, #ffe7ba 0%, #f0f9ff 100%) !important;
  box-shadow: 0 4px 12px rgba(255, 122, 0, 0.25);
  transform: translateY(-1px);
  transition: all 0.3s ease;
}

/* 昨日案件行样式 */
:deep(.yesterday-row) {
  background-color: #fff7e6 !important;
  border-left: 4px solid #fa8c16;
}

:deep(.yesterday-row:hover) {
  background-color: #fffbe6 !important;
}

/* 近3日案件行样式 */
:deep(.recent-row) {
  background-color: #f0f5ff !important;
  border-left: 4px solid #1890ff;
}

:deep(.recent-row:hover) {
  background-color: #e6f7ff !important;
}

/* 更早案件行样式 */
:deep(.older-row) {
  background-color: #fafafa !important;
  border-left: 4px solid #d9d9d9;
}

:deep(.older-row:hover) {
  background-color: #f5f5f5 !important;
}

/* 无日期案件行样式 */
:deep(.no-date-row) {
  background-color: #fff2f0 !important;
  border-left: 4px solid #ff4d4f;
}

:deep(.no-date-row:hover) {
  background-color: #fff1f0 !important;
}

/* 无效日期案件行样式 */
:deep(.invalid-date-row) {
  background-color: #f9f0ff !important;
  border-left: 4px solid #722ed1;
}

:deep(.invalid-date-row:hover) {
  background-color: #f4f0ff !important;
}

/* 表格行悬停效果优化 */
:deep(.ant-table-tbody > tr:hover > td) {
  background-color: inherit !important;
}

/* 状态选项卡样式 */
.status-tabs {
  margin-bottom: 16px;
}

:deep(.status-tabs .ant-tabs-nav) {
  margin-bottom: 0;
}

:deep(.status-tabs .ant-tabs-tab) {
  padding: 8px 16px;
  margin-right: 8px;
}

:deep(.status-tabs .ant-tabs-tab-active) {
  background-color: #f0f9ff;
  border-radius: 4px;
}

:deep(.status-tabs .ant-tabs-content-holder) {
  padding-top: 16px;
}

/* 复制按钮样式 */
:deep(.copy-batch-name-btn) {
  background: none !important;
  border: none !important;
  cursor: pointer;
  padding: 4px !important;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  color: #666;
}

:deep(.copy-batch-name-btn:hover) {
  background-color: #f0f0f0 !important;
  color: #1890ff;
  transform: scale(1.1);
}

:deep(.copy-batch-name-btn:active) {
  transform: scale(0.95);
}

:deep(.copy-batch-name-btn svg) {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

/* 上传按钮icon和文字对齐 */
.upload-button {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0px !important;
}

.upload-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 14px !important;
  line-height: 1 !important;
}

.upload-text {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}
</style>
